<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor - AI赋能的现代代码编辑器</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .code-block {
            background: #282c34;
            border-radius: 8px;
            position: relative;
        }
        .code-block:before {
            content: '';
            position: absolute;
            top: 12px;
            left: 12px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ff5f56;
            box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .comparison-table {
            border-collapse: separate;
            border-spacing: 0;
        }
        .comparison-table th, .comparison-table td {
            border-top: 1px solid #e2e8f0;
            border-bottom: 1px solid #e2e8f0;
        }
        .comparison-table th:first-child, .comparison-table td:first-child {
            border-left: 1px solid #e2e8f0;
            border-radius: 8px 0 0 8px;
        }
        .comparison-table th:last-child, .comparison-table td:last-child {
            border-right: 1px solid #e2e8f0;
            border-radius: 0 8px 8px 0;
        }
        .stat-card {
            position: relative;
            overflow: hidden;
        }
        .stat-card:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            z-index: 0;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 lg:py-32">
        <div class="container mx-auto px-6">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-12 lg:mb-0">
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                        <span class="block">Cursor</span>
                        <span class="text-blue-200">AI赋能的现代代码编辑器</span>
                    </h1>
                    <p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-lg">
                        重新定义编程体验，让AI成为您的开发伙伴
                    </p>
                    <div class="flex space-x-4">
                        <a href="#features" class="bg-white text-indigo-800 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition duration-300">
                            探索功能
                        </a>
                        <a href="#comparison" class="border-2 border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-800 transition duration-300">
                            与传统编辑器比较
                        </a>
                    </div>
                </div>
                <div class="lg:w-1/2 flex justify-center">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1748141670543-a6d49e65-2d7a-4272-a3dc-07fa634aa4a0.png" alt="Cursor编辑器界面" class="rounded-xl shadow-2xl w-full max-w-lg border-4 border-white">
                </div>
            </div>
        </div>
    </section>

    <!-- Definition Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Cursor的定义与发展历史</h2>
                <div class="w-20 h-1 bg-indigo-600 mx-auto"></div>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <p class="text-lg text-gray-700 mb-8">
                    <span class="text-4xl float-left mr-2 font-serif font-bold text-indigo-600">C</span>ursor 是一款集成了强大人工智能的现代代码编辑器，它以提高开发者编码效率和代码质量为核心目标。作为一款基于 VSCode 构建的编辑器，Cursor 在保留传统编辑器优势的同时，通过深度融合 AI 技术，为开发者提供了全新的编程体验。
                </p>
                
                <div class="grid md:grid-cols-2 gap-8 mt-12">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-project-diagram text-indigo-600 mr-2"></i> 技术架构和底层原理
                        </h3>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                    <i class="fas fa-cube text-xs"></i>
                                </span>
                                <span>VSCode 基础框架：Cursor 是 VSCode 的一个分支，继承了其稳定性、可扩展性和广泛的生态系统</span>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                    <i class="fas fa-brain text-xs"></i>
                                </span>
                                <span>AI 模型集成：集成了多种先进的大型语言模型（LLM），包括 GPT-4、Claude 等</span>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                    <i class="fas fa-network-wired text-xs"></i>
                                </span>
                                <span>上下文理解系统：独特的上下文管理引擎，能够智能收集和处理项目中的相关代码</span>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                    <i class="fas fa-search text-xs"></i>
                                </span>
                                <span>代码分析引擎：内置的代码分析工具能够理解代码结构、依赖关系和潜在问题</span>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                    <i class="fas fa-graduation-cap text-xs"></i>
                                </span>
                                <span>自适应学习机制：通过观察用户的编码习惯和偏好，Cursor 能够逐渐调整 AI 建议</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-code-branch text-indigo-600 mr-2"></i> Cursor 与 VSCode 的关系
                        </h3>
                        <div class="mermaid mb-4">
                            graph LR
                            A[VSCode] --> B((Cursor))
                            B --> C[AI 能力增强]
                            B --> D[生态兼容]
                            B --> E[差异化发展]
                            B --> F[更新同步]
                        </div>
                        <ul class="space-y-2">
                            <li class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                <span>代码基础：基于 VSCode 开源代码的一个分支</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                <span>生态兼容：完全兼容 VSCode 的扩展生态系统</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                <span>差异化发展：在 AI 能力上有着显著的差异化发展</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                <span>更新同步：定期将 VSCode 的核心更新同步到 Cursor 中</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">核心优势与特点</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Cursor 凭借其独特的 AI 能力，在编程工具市场中脱颖而出</p>
                <div class="w-20 h-1 bg-indigo-600 mx-auto mt-4"></div>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8 mb-16">
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-robot text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-gray-800">AI 驱动的编程体验</h3>
                    <p class="text-gray-600 mb-4">将 AI 能力无缝融入编码流程，提供前所未有的开发体验</p>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-check text-indigo-500 mr-2 mt-1"></i>
                            <span>智能代码补全：生成完整的函数、类甚至整个模块</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-indigo-500 mr-2 mt-1"></i>
                            <span>实时代码重写：通过自然语言指令重构和优化现有代码</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-indigo-500 mr-2 mt-1"></i>
                            <span>错误检测与修复：识别潜在错误并提供修复建议</span>
                        </li>
                    </ul>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-shapes text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-gray-800">多模型支持</h3>
                    <p class="text-gray-600 mb-4">集成多种先进AI模型，根据任务需求自由切换</p>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-exchange-alt text-indigo-500 mr-2 mt-1"></i>
                            <span>模型切换自由：在 GPT-4、Claude 等多种 AI 模型间切换</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-medal text-indigo-500 mr-2 mt-1"></i>
                            <span>专业化能力：不同模型有各自的专长，适应不同任务需求</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-sync-alt text-indigo-500 mr-2 mt-1"></i>
                            <span>持续更新：不断集成最新、最强大的 AI 技术</span>
                        </li>
                    </ul>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-comments text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-gray-800">自然语言编程交互</h3>
                    <p class="text-gray-600 mb-4">革命性改变开发者与编辑器的交互方式</p>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-comment-dots text-indigo-500 mr-2 mt-1"></i>
                            <span>对话式编程：通过自然语言描述需求，让 AI 理解并实现功能</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-question-circle text-indigo-500 mr-2 mt-1"></i>
                            <span>代码解释问答：直接询问关于代码的问题，获取即时解答</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-redo text-indigo-500 mr-2 mt-1"></i>
                            <span>实时反馈循环：在编码过程中获得即时反馈和建议</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-6">
                    <div class="flex flex-col md:flex-row">
                        <div class="md:w-1/2 mb-6 md:mb-0">
                            <h3 class="text-xl font-semibold mb-4 text-gray-800">智能代码补全示例</h3>
                            <p class="text-gray-600 mb-4">只需输入注释和函数签名，Cursor 即可补全整个实现</p>
                            <div class="code-block p-4">
                                <pre class="text-gray-300 text-sm overflow-x-auto"><code># 只需输入注释和函数签名，Cursor 即可补全整个实现
def calculate_fibonacci(n):
    """计算斐波那契数列的第n个数"""
    # Cursor 会自动生成完整的实现
    if n <= 0:
        return 0
    elif n == 1:
        return 1
    else:
        return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)</code></pre>
                            </div>
                        </div>
                        <div class="md:w-1/2 md:pl-6">
                            <h3 class="text-xl font-semibold mb-4 text-gray-800">AI交互流程</h3>
                            <div class="mermaid">
                                graph TD
                                A[开发者输入自然语言指令] --> B{AI理解需求}
                                B -->|生成代码| C[展示代码建议]
                                B -->|需要澄清| D[提问获取更多信息]
                                C --> E[开发者审查]
                                E --> F{接受建议?}
                                F -->|是| G[应用代码]
                                F -->|否| H[提供反馈]
                                H --> B
                                D --> I[开发者补充信息]
                                I --> B
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Comparison Section -->
    <section id="comparison" class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">与传统编辑器的比较</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Cursor 如何改变游戏规则</p>
                <div class="w-20 h-1 bg-indigo-600 mx-auto mt-4"></div>
            </div>
            
            <div class="overflow-x-auto mb-16">
                <table class="comparison-table w-full">
                    <thead>
                        <tr class="bg-gray-50">
                            <th class="py-4 px-6 text-left font-semibold text-gray-700">功能</th>
                            <th class="py-4 px-6 text-left font-semibold text-gray-700">传统编辑器</th>
                            <th class="py-4 px-6 text-left font-semibold text-gray-700">Cursor</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        <tr>
                            <td class="py-4 px-6">代码补全</td>
                            <td class="py-4 px-6">基于简单模式匹配和语法规则</td>
                            <td class="py-4 px-6 text-indigo-600 font-medium">基于深度理解的智能补全，可生成完整函数和类</td>
                        </tr>
                        <tr>
                            <td class="py-4 px-6">代码生成</td>
                            <td class="py-4 px-6">有限的代码片段支持</td>
                            <td class="py-4 px-6 text-indigo-600 font-medium">通过自然语言描述生成完整代码块</td>
                        </tr>
                        <tr>
                            <td class="py-4 px-6">错误检测</td>
                            <td class="py-4 px-6">基础语法检查</td>
                            <td class="py-4 px-6 text-indigo-600 font-medium">语法+逻辑错误检测，并提供智能修复建议</td>
                        </tr>
                        <tr>
                            <td class="py-4 px-6">重构能力</td>
                            <td class="py-4 px-6">基础的变量重命名等</td>
                            <td class="py-4 px-6 text-indigo-600 font-medium">复杂的代码结构重构和优化</td>
                        </tr>
                        <tr>
                            <td class="py-4 px-6">文档生成</td>
                            <td class="py-4 px-6">有限或需要插件</td>
                            <td class="py-4 px-6 text-indigo-600 font-medium">自动解析代码生成高质量文档</td>
                        </tr>
                        <tr>
                            <td class="py-4 px-6">学习曲线</td>
                            <td class="py-4 px-6">较陡峭，需要学习众多命令</td>
                            <td class="py-4 px-6 text-indigo-600 font-medium">自然语言交互降低学习门槛</td>
                        </tr>
                        <tr>
                            <td class="py-4 px-6">扩展性</td>
                            <td class="py-4 px-6">插件系统</td>
                            <td class="py-4 px-6 text-indigo-600 font-medium">兼容插件系统+内置 AI 扩展能力</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-800 text-center">生产力提升的量化数据</h3>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="stat-card bg-white p-6 rounded-xl shadow-md text-center relative">
                    <div class="text-4xl font-bold text-indigo-600 mb-2 relative z-10">30-50%</div>
                    <h4 class="text-lg font-semibold mb-2 text-gray-800 relative z-10">开发速度提升</h4>
                    <p class="text-gray-600 relative z-10">平均编码速度提升 30-50%，特别是在处理重复性任务时</p>
                </div>
                <div class="stat-card bg-white p-6 rounded-xl shadow-md text-center relative">
                    <div class="text-4xl font-bold text-indigo-600 mb-2 relative z-10">25%</div>
                    <h4 class="text-lg font-semibold mb-2 text-gray-800 relative z-10">错误率降低</h4>
                    <p class="text-gray-600 relative z-10">代码缺陷减少约 25%，减少了 QA 和测试时间</p>
                </div>
                <div class="stat-card bg-white p-6 rounded-xl shadow-md text-center relative">
                    <div class="text-4xl font-bold text-indigo-600 mb-2 relative z-10">40%</div>
                    <h4 class="text-lg font-semibold mb-2 text-gray-800 relative z-10">学习效率提升</h4>
                    <p class="text-gray-600 relative z-10">新技术学习时间缩短 40%，AI 辅助能够提供实时解释和示例</p>
                </div>
                <div class="stat-card bg-white p-6 rounded-xl shadow-md text-center relative">
                    <div class="text-4xl font-bold text-indigo-600 mb-2 relative z-10">35%</div>
                    <h4 class="text-lg font-semibold mb-2 text-gray-800 relative z-10">重构效率提升</h4>
                    <p class="text-gray-600 relative z-10">大型代码重构项目时间减少 35%，AI 能够理解整体代码结构</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">适用场景与用户群体</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Cursor 适用于广泛的编程场景，但在不同环境中发挥的作用各有侧重</p>
                <div class="w-20 h-1 bg-indigo-600 mx-auto mt-4"></div>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-user-tie text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">个人开发者应用案例</h3>
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-bolt text-xs"></i>
                            </div>
                            <span>快速原型开发：能够将想法迅速转化为可运行的代码</span>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-graduation-cap text-xs"></i>
                            </div>
                            <span>学习新技术：通过与 AI 交互，快速理解和掌握新的编程语言、框架或库</span>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-star text-xs"></i>
                            </div>
                            <span>提高代码质量：AI 可以帮助发现潜在问题并提供优化建议</span>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-file-alt text-xs"></i>
                            </div>
                            <span>文档和注释：自动生成高质量的代码文档和注释，提高代码可维护性</span>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-users text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">团队协作环境中的价值</h3>
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-code text-xs"></i>
                            </div>
                            <span>统一代码风格：帮助团队成员生成符合团队规范的代码</span>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-share-alt text-xs"></i>
                            </div>
                            <span>知识共享：新队员可以通过询问 AI 快速了解项目结构和核心逻辑</span>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-search text-xs"></i>
                            </div>
                            <span>代码审查辅助：发现潜在问题和优化机会，提高审查效率</span>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-comments text-xs"></i>
                            </div>
                            <span>减少沟通成本：通过 AI 解释复杂逻辑，减少团队成员之间的解释时间</span>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-chalkboard-teacher text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">教育与学习场景</h3>
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-door-open text-xs"></i>
                            </div>
                            <span>编程入门：降低学习编程的门槛，学生可以通过自然语言表达需求</span>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-lightbulb text-xs"></i>
                            </div>
                            <span>概念解释：为学生提供即时的概念解释和实例说明</span>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-user-graduate text-xs"></i>
                            </div>
                            <span>个性化学习：根据学生的水平和问题提供定制化的指导</span>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-project-diagram text-xs"></i>
                            </div>
                            <span>实践项目辅助：帮助学生完成复杂项目，提供思路和指导</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 bg-indigo-700 text-white">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">准备好提升您的编程体验了吗？</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto">立即体验 Cursor，让 AI 成为您的编程伙伴，释放开发潜能</p>
            <a href="#" class="bg-white text-indigo-800 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition duration-300 inline-block">
                立即下载 Cursor
                <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-lg font-semibold">技术小馆</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="hover:text-white transition duration-300">
                        <i class="fas fa-link mr-2"></i> http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            securityLevel: 'loose'
        });
    </script>
</body>
</html>